<template>
    <div class="page-404">
        <a-result status="404" title="404" sub-title="Sorry, 你访问的页面不存在">
            <template #extra>
                <a-button type="primary" @click="handleBack">
                    <template #icon><RollbackOutlined /></template>
                    返回上一页
                </a-button>
            </template>
        </a-result>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { RollbackOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
export default defineComponent({
    components: {
        RollbackOutlined
    },
    setup() {
        const router = useRouter()

        function handleBack() {
            router.back()
        }

        return {
            handleBack
        }
    }
})
</script>
<style lang="scss">
.page-404 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>